<template>
	<view class="relative full-screen">
		<view class="page-bg" style="z-index:0;position:absolute;left:0;right:0;top:0;height:396px;background-image:radial-gradient(circle at left top, #D8230A26 50%, transparent 50%);background-size:396px 396px;background-repeat:no-repeat;filter:blur(50px);"></view>
		<z-paging ref="paging" :refresher-enabled="userStore.isLogin" :refresher-only="true" :use-refresher-status-bar-placeholder="true" @query="refresh">
			<template #bottom>
				<!-- <view :style="`height:calc(60px + ${safeAreaBottom}px);`"></view> -->
			</template>
				<uni-nav-bar ref="navBar" fixed statusBar :border="false" backgroundColor="transparent"></uni-nav-bar>
				<view class="relative">
					<template v-if="!userStore.isLogin">
						<view class="mx-16 mt-19 mb-24 flex justify-between item-center">
							<view class="flex item-center">
								<image class="cu-avatar round mr-12" style="width:52px;height:52px;" src="https://admin.huodongtg.com/static/image/offline-avatar.jpg"></image>
								<text class="text-color-regular fs-16 font-semibold" style="z-index:1;" @click="toLogin">登录/注册</text>
							</view>
							<image class="size-16" src="@/static/image/icon-msg.png" @click="toMessage"></image>
						</view>
						<order-menus-group />
						<common-menus-group />
					</template>
					<template v-else-if="userStore.userInfo">
						<view class="mx-16 mt-19 mb-16 flex justify-between item-center">
							<view class="flex flex-1 w-0 item-center mr-10">
								<image class="cu-avatar round mr-12 flex-shrink" style="width:52px;height:52px;" v-if="userStore.isMerchant" :src="userStore.userInfo.businessInfo && userStore.userInfo.businessInfo.logo"></image>
								<image class="cu-avatar round mr-12 flex-shrink" style="width:52px;height:52px;" :src="userStore.userInfo && userStore.userInfo.avatar" v-else></image>
								<view class="flex-col flex-1 w-0 mr-10">
									<view class="flex item-center">
										<text class="text-color-regular fs-16 font-semibold mr-8 text-cut">{{userStore.isMerchant?userStore.userInfo.businessInfo.businessShortName:userStore.userInfo.nickName}}</text>
										<image v-if="userStore.isMerchant" class="flex-shrink size-20" src="@/static/svg/mine/icon-qrcode.svg" @click="toShare"></image>
									</view>
									<template v-if="userStore.isMerchant && !isNotOpenVip">
										<image v-if="isVip"  class="mt-8 w-48 h-16" src="@/static/svg/mine/icon-vip.png"></image>
										<image v-else class="mt-8 w-48 h-16" src="@/static/svg/mine/icon-not-vip.png"></image>
									</template>
								</view>
							</view>
							<view v-if="userStore.isMerchant" class="flex-shrink flex item-center fs-12 leading-17" style="z-index:1;" @tap="toHomePage"><text>个人主页</text><image class="ml-4 w-3 h-6" src="@/static/svg/arrow-stroke.svg"></image></view>
							<view v-else class="relative inline-flex" @click="toMessage">
								<image class="flex-shrink size-16" src="@/static/image/icon-msg.png"></image>
								<view v-if="messageStore.unreadCount>0" class="absolute size-7 bg-primary" style="right:-2px;top:0;border-radius:50%;"></view>
							</view>
						</view>
						<view v-if="userStore.isMerchant" class="mx-16 relative" style="background:url('https://admin.huodongtg.com/static/image/bg-mine-top.png') no-repeat;background-size:100%;background-color:#EDDEBF;border-top-left-radius:8px;border-top-right-radius:8px;padding:8px 16px 18px 16px;">
							<view v-if="isNotOpenVip" class="flex justify-between item-center">
								<text class="fs-12 leading-17">升级会员享策划人专属权益</text>
								<view class="radius-16 px-16 py-4 leading-17 fs-12 font-semibold" style="background:#333;color:#EDDEBF;" @click="toVip">查看收费方案</view>
							</view>
							<template v-else>
								<view v-if="isVip" class="flex justify-between item-center">
									<text class="fs-12 leading-17">有效期至 {{userStore.userInfo.businessInfo.memberExpireTime.split(' ')[0]}}</text>
									<view class="radius-16 px-16 py-4 leading-17 fs-12 font-semibold" style="background:#333;color:#EDDEBF;" @click="toVip">续费</view>
								</view>
								<view v-else class="flex justify-between item-center">
									<text class="fs-12 leading-17">已于 {{userStore.userInfo.businessInfo.memberExpireTime.split(' ')[0]}} 到期</text>
									<view class="radius-16 px-16 py-4 leading-17 fs-12 font-semibold" style="background:#333;color:#EDDEBF;" @click="toVip">续费</view>
								</view>
							</template>
							<view class="absolute w-full flex justify-center" style="top: 100%;left: 0;">
								<view class="triangle" style="border-top-color: #EDDEBF;"></view>
							</view>
						</view>
						<view v-else class="mx-16 relative" style="background:url('https://huodtg.oss-cn-hangzhou.aliyuncs.com/hd/miniprogram/bg-mine-top-2.png') no-repeat;background-size:100%;background-color:#FA4543;border-top-left-radius:8px;border-top-right-radius:8px;padding:8px 12px 18px 16px;">
							<view class="flex justify-between item-center">
								<text class="fs-12 text-white leading-17">升级策划人，你的活动你做主</text>
								<view class="inline-flex px-16 py-4 radius-16 text-color-regular fs-12 font-semibold" style="background:#EDDFC4;" @click="changeLevle('result')" v-if="myDataInfo.auditState==1||myDataInfo.auditState==3||myDataInfo.auditState==4">{{myDataInfo.auditState==1?'审核中':myDataInfo.auditState==3?'未通过':'待认证'}}</view>
								<view class="inline-flex px-16 py-4 radius-16 text-color-regular fs-12 font-semibold" style="background:#EDDFC4;" @click="changeLevle(null)" v-if="myDataInfo.auditState==0">免费升级策划人</view>
							</view>
							<view class="absolute w-full flex justify-center" style="top: 100%;left: 0;">
								<view class="triangle" style="border-top-color: #D8230A;"></view>
							</view>
						</view>
						<view class="flex-col mb-16" style="background:url('https://admin.huodongtg.com/static/svg/bg-mine.svg') no-repeat;background-size:100%;margin-top:-16px;padding-top:26px;">
							<view v-if="userStore.isMerchant" class="relative mx-16 mb-12 radius-8 bg-primary text-white pl-24 pr-8 flex justify-between item-center" style="height:67px;">
								<image class="absolute w-full h-full" mode="aspectFill" style="top:0;left:0;right:0;bottom:0;" src="https://huodtg.oss-cn-hangzhou.aliyuncs.com/hd/miniprogram/bg-amt.png"></image>
								<block v-if="userStore.isAgent">
									<view v-if="myDataInfo" class="flex item-center w-full">
										<view class="flex-1" style="z-index:1;" @click="toSubsidy">
											<view class="fs-12 leading-17" style="color:rgba(255, 255, 255, 0.60);">补贴金金额(元)</view>
											<view class="mt-4 fs-16 font-semibold text-white">{{numberFormat(myDataInfo.subsidyAmt)}}</view>
										</view>
										<view class="h-33 w-1" style="background-color:#F7F7F7; opacity:0.3;"></view>
										<view class="flex-1 flex justify-between item-center">
											<view class="pl-24">
												<view class="fs-12 leading-17" style="color:rgba(255, 255, 255, 0.60);">我的收益(元)</view>
												<view class="mt-4 fs-16 font-semibold text-white">{{numberFormat(myDataInfo.commissionAmt)}}</view>
											</view>
											<view class="inline-flex item-center fs-10 py-10" style="color:rgba(255, 255, 255, 0.90);z-index:1;" @click="toWithdrawal">去提现<image class="size-10" src="@/static/svg/icon-arrow.svg"></image></view>
										</view>
									</view>
								</block>
								<block v-else>
									<!-- 仅策划人，非经纪人 -->
									<view v-if="myDataInfo" class="flex item-center w-full" style="z-index:1;" @click="toSubsidy">
										<view class="flex-1">
											<view class="fs-12 leading-17" style="color:rgba(255, 255, 255, 0.60);">补贴金金额(元)</view>
											<view class="mt-4 fs-16 font-semibold text-white">{{numberFormat(myDataInfo.subsidyAmt)}}</view>
										</view>
									</view>
								</block>
							</view>
							<view v-else-if="userStore.isAgent" class="relative mx-16 mb-12 radius-8 bg-primary text-white px-16 flex justify-between item-center" style="height:67px;">
								<image class="absolute w-full h-full" style="top:0;left:0;right:0;bottom:0;" src="https://huodtg.oss-cn-hangzhou.aliyuncs.com/hd/miniprogram/bg-amt.png"></image>
								<view v-if="myDataInfo">
									<view class="fs-12 leading-17" style="color:rgba(255, 255, 255, 0.60);">我的收益(元)</view>
									<view class="mt-4 fs-16 font-semibold text-white">{{numberFormat(myDataInfo.commissionAmt)}}</view>
								</view>
								<view class="inline-flex item-center fs-10 py-10" style="color:rgba(255, 255, 255, 0.90);z-index:1;" @click="toWithdrawal">去提现<image class="size-10" src="@/static/svg/icon-arrow.svg"></image></view>
							</view>
							<data-center v-if="userStore.isMerchant" :data="myDataInfo" />
							<order-menus-group :myPageInfo="myDataInfo" />
							<planner-menus-group v-if="userStore.isMerchant || userStore.isAgent" />
							<common-menus-group />
						</view>
					</template>
					
					<!-- <input type="text" placeholder="邀请码" style="border: 1px solid #eeeeee;height: 40px;background-color: antiquewhite;" v-model="merchantCode">
					<button @click="preapply(1)">经纪人路口</button>
					<input type="text" placeholder="邀请码" style="border: 1px solid #eeeeee;height: 40px;background-color: antiquewhite;" v-model="merchantCode">
					<button @click="preapply(2)">策划人路口</button> -->
					
				</view>
			<view :style="`height:calc(60px + ${safeAreaBottom}px);`"></view>
		</z-paging>
		<joinPop ref="joinPopRef"></joinPop>
		<share-homepage v-if="showSharePopup" :id="userStore.userInfo && userStore.userInfo.businessInfo && userStore.userInfo.businessInfo.id" :show="showSharePopup" @onClose="showSharePopup=false"></share-homepage>
	</view>
</template>

<script setup name="Mine">
	import {
		computed,
		onMounted,
		onUnmounted,
		ref,
		watch
	} from 'vue'
	import {
		useUserStore
	} from '@/stores/modules/user.js'
	import { myPageApi } from '@/api/index.js'
	import {savePopType} from '@/api/common.js'
	import DataCenter from './components/data-center.vue'
	import OrderMenusGroup from './components/order-menus-group.vue'
	import PlannerMenusGroup from './components/planner-menus-group.vue'
	import CommonMenusGroup from './components/common-menus-group.vue'
	import joinPop from './components/joinPop.vue'
	import { useMessageStore } from '@/stores/modules/message.js'
	import { numberFormat } from '@/utils/index.js'

	
	const userStore = useUserStore()
	const messageStore = useMessageStore()

	const navBar = ref(null)
	const joinPopRef = ref()

	const navBarHeight = computed(() => {
		const statusBarHeight = uni.getWindowInfo().statusBarHeight
		const navigationBarHeight = statusBarHeight + (navBar.value && navBar.value.height || 0)
		return navigationBarHeight
	})
	const safeAreaBottom = computed(() => {
		return uni.getSystemInfoSync().safeAreaInsets.bottom
	})
	
	// 是否未过期会员
	const isVip = computed(() => {
		return userStore.userInfo && userStore.userInfo.businessInfo && userStore.userInfo.businessInfo.memberExpireTime && (new Date(userStore.userInfo.businessInfo.memberExpireTime).getTime() > new Date().getTime()) || false
	})
	// 未开通会员
	const isNotOpenVip = computed(() => {
		return !(userStore.userInfo && userStore.userInfo.businessInfo && userStore.userInfo.businessInfo.memberExpireTime) || false
	})

	const toLogin = () => {
		uni.navigateTo({
			url: `/pagesA/login/login?from=${encodeURIComponent('/pages/home/home?tab=4')}`,
			events: {
				onLoginSuccess () {
					initData()
				}
			}
		})
	}
	
	const showSharePopup = ref(false)
	const toShare = () => {
		showSharePopup.value = true
	}

	const toVip = () => {
		uni.navigateTo({
			url: '/pagesA/vip/vip'
		})
	}
	
	// 消费者消息入口
	const toMessage = () => {
		if (userStore.isLogin) {
			uni.navigateTo({
				// url: '/pages/home/home?tab=3'
				url: '/pagesA/customer/message-list'
			})
		} else {
			toLogin()
		}
	}
	
	const toHomePage = () => {
		userStore.userInfo && userStore.userInfo.businessInfo &&
		uni.navigateTo({
			url: `/pagesA/merchant/homepage?id=${userStore.userInfo.businessInfo.id}`
		})
	}
	
	// 提现
	const toWithdrawal = () => {
		uni.navigateTo({
			url: '/pagesG/withdraw/withdraw-info'
		})
	}
	
	// 补贴账户
	const toSubsidy = () => {
		uni.navigateTo({
			url: '/pagesG/subsidy/subsidy-info'
		})
	}
	
	const refresh = () => {
		userStore.getUserInfo()
		queryList()
		getNoReadCount()
	}
	const changeLevle = (type) => {
		
		uni.redirectTo({
			url: type=='result'?`/applyPages/bussinessApply/applyResult/applyResult`: `/applyPages/inviteApply/inviteApply`
		})
	}
	
	const myDataInfo = ref({})
	const paging = ref(null)

	const queryList = () => {
		// if (userStore.isAgent || userStore.isMerchant) {
		myPageApi().then(res => {
			// res.waitVerifyOrderNum = 4
			myDataInfo.value = res||{}
			if(myDataInfo.value.popState){
				userStore.getUserInfo()
				joinPopRef.value.showPop(true)
				savePopType(1)
			}
			paging.value.complete()
		})
		// } else {
		// 	paging.value.complete()
		// }
	}
	const merchantCode = ref('MDFRZ9')
	const preapply = (num) => {
		uni.redirectTo({
			// url: num == 1?`/applyPages/bindBusiness/bindBusiness?code=${merchantCode.value}`:
			// `/applyPages/inviteApply/inviteApply?code=${merchantCode.value}`
			url:`/applyPages/bussinessApply/bussinessApply`
			// url:`/applyPages/bussinessApply/applyResult/applyResult`
		})
		
	}
	const initData = () => {
		if (userStore.isLogin) {
			queryList()
			getNoReadCount()
		}
	}
	
	// 获取未读消息数
	const getNoReadCount = () => {
		if (userStore.isLogin) {
			messageStore.getUnreadCount()
		}
	}
	
	onMounted(async() => {
		await userStore.getUserInfo();			
		initData()
		uni.$on('loginSuccess', refresh)
	})
	
	onUnmounted(() => {
		uni.$off('loginSuccess', refresh)
	})
</script>